<template>
  <div class="center-editor">
    <!-- 用户名 -->
    <div>
      <p class="IptLayout">
      <p>
        用&ensp;户&ensp;名:
        <input :class="isShowEditorUser ? '' : 'editorIpt'" :disabled="!isShowEditorUser" type="text"
          v-model.trim="username" />
      </p>
      <el-icon @click="handleIsShowEditorUser" style="cursor: pointer">
        <EditPen />
      </el-icon>
      </p>

    </div>
    <!-- 邮箱换绑 -->
    <div>
      <p class="IptLayout">
      <p>
        邮箱换绑: &ensp;{{ store.state.userBase.email }}
      </p>
      <el-icon @click="handleIsShowEditorEmail" style="cursor: pointer">
        <EditPen />
      </el-icon>
      </p>
      <p v-show="isShowEditorEmail" class="ChangeEmail">
        <el-input v-model.trim="email" placeholder="请输新的邮箱" type="email" clearable :prefix-icon="Message" size="small" />
      <div class="email">

        <el-input v-model.trim="emailCode" placeholder="输入验证码" type="email" clearable :prefix-icon="Key" /> &emsp;
        <SendCode :email="email"></SendCode>
      </div>
      </p>
    </div>
    <!-- 上传修改头像 -->
    <div>
      <p class="upload">上传头像:</p>
      <UploadAvatar ref="avatar"></UploadAvatar>
    </div>
    <div style="text-align: right; padding-right: 40px; margin-top: -20px;">
      <el-button type="primary" round @click="update">修改</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, inject, onMounted, defineAsyncComponent } from 'vue'
import { EditPen, Message, Key } from '@element-plus/icons-vue'

import { ElMessage } from 'element-plus'
import { updateUser } from '@/utils/http/login'
// 导入发送验证码
const SendCode = defineAsyncComponent(() => import('@/components/login/SendCode.vue'))

const UploadAvatar = defineAsyncComponent(() => import('@/components/upload/UploadAvatar.vue'))


const isShowEditorUser = ref<boolean>(false)
const isShowEditorEmail = ref<boolean>(false)

const username = ref<string>('')
const email = ref<string>('')
const emailCode = ref<string>('')
// 改变状态
const handleIsShowEditorUser = () => {
  isShowEditorUser.value = !isShowEditorUser.value
}
const handleIsShowEditorEmail = () => {
  isShowEditorEmail.value = !isShowEditorEmail.value
}
// 全局状态
const store: any = inject('store')
onMounted(() => {
  username.value = store.state.userBase.username
  email.value = store.state.userBase.email
})

// 更新数据
const avatar = ref<InstanceType<typeof UploadAvatar>>()

const update = () => {

  let newEmail = null
  if (email.value != store.state.userBase.email) {
    newEmail = email.value
    if (!emailCode.value) return ElMessage.warning('验证码不能为空')
  }
  const fd = new FormData()
  fd.append('username', username.value)
  fd.append('oldEmail', store.state.userBase.email)
  if (newEmail) {
    fd.append('email', newEmail)
    fd.append('code', emailCode.value)
  }
  if (avatar.value && avatar.value.fileList[0]) {
    fd.append('oldFile', store.state.userBase.avatar)
    fd.append('avatar', (avatar.value.fileList[0] as any).raw)
  }
  updateUser(fd).then(res => {
    console.log(res.data);
    if (res.data.ok) {
      store.SetUserBase({ ...store.state.userBase, ...res.data.BaseUser })
      isShowEditorUser.value = false
      isShowEditorEmail.value = false
    } else {
      ElMessage.error(res.data.info)
    }
  })
}
</script>

<style lang="scss" scoped>
.upload {
  margin-bottom: 10px;
}

.center-editor {
  min-width: 360px;
  font-size: 16px;

  input {
    outline: none;
    border: 0;
    height: 30px;
    padding: 0 8px;
    color: #000;
    margin-right: 20px;
    width: 150px;
    font-size: 16px;
  }

  .editorIpt {
    background: transparent;
    color: #fff;
    border: 0;
    outline: none;
  }
}

.IptLayout {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ChangeEmail {
  width: 300px;
  margin-top: 10px;
}

.email {
  display: flex;
  align-items: flex-end;
  margin-top: 10px;
}

@media (max-width: 760px) {
  .editor {
    font-size: 14px;

    input {
      font-size: 14px;
    }

    .IptLayout {
      width: 250px;
    }
  }

  .ChangeEmail {
    width: 250px;
  }
}
</style>
